<template>
	<div class="system-user-dialog-container">
		<el-dialog title="设备详情" v-model="state.dialog.isShowDialog" width="769px">
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="已激活" name="actived">
					<el-table :data="activeDevices">
						<el-table-column type="index" label="序号" width="60" />
						<el-table-column prop="code" label="设备编号" show-overflow-tooltip></el-table-column>
						<el-table-column prop="equipmentmode" label="型号" show-overflow-tooltip></el-table-column>
						<el-table-column prop="status" label="状态" show-overflow-tooltip>
							<template #default="scope">
								<el-tag v-if="scope.row.status == 'actived'" type="success">已激活</el-tag>
								<el-tag v-if="scope.row.status == 'disactived'" type="danger">未激活</el-tag>
							</template>
						</el-table-column>
						<!-- <el-table-column prop="operator" label="操作人" show-overflow-tooltip></el-table-column> -->
						<el-table-column prop="dealer.orgName" label="代理商" show-overflow-tooltip></el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="未激活" name="disactived">
					<el-table :data="disactiveDevices">
						<el-table-column type="index" label="序号" width="60" />
						<el-table-column prop="code" label="设备编号" show-overflow-tooltip></el-table-column>
						<el-table-column prop="equipmentmode" label="型号" show-overflow-tooltip></el-table-column>
						<el-table-column prop="status" label="状态" show-overflow-tooltip>
							<template #default="scope">
								<el-tag v-if="scope.row.status == 'actived'" type="success">已激活</el-tag>
								<el-tag v-if="scope.row.status == 'disactived'" type="danger">未激活</el-tag>
							</template>
						</el-table-column>
						<!-- <el-table-column prop="operator" label="操作人" show-overflow-tooltip></el-table-column> -->
						<el-table-column prop="dealer.orgName" label="代理商" show-overflow-tooltip></el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { DealerVo, useDealer } from './dealer';
import { flatten } from 'lodash-es';
const activeName = ref('actived');
// 定义子组件向父组件传值/事件

const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

const activeDevices = ref([]);
const disactiveDevices = ref([]);

const handleClick = (tab: any) => {
	activeName.value = tab.props.name;
};

// 打开弹窗
const openDialog = (row: DealerVo) => {
	state.submitTxt = '确定';
	// ruleForm.value = row;
	state.dialog.isShowDialog = true;

	useDealer()
		.getDevices(row.orgId!)
		.then((res) => {
			const list = res.data.list;
			activeDevices.value = list.filter((item: any) => item.status === 'actived');
			disactiveDevices.value = list.filter((item: any) => item.status === 'disactived');
		});
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
